<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/17
  Time: 21:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>宠物领养管理后台</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/metisMenu.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/sb-admin-2.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/static/css/admin/boot-crm.css" rel="stylesheet" type="text/css">
    <style>
        .panel-heading{background-color: #337ab7;border-color: #2e6da4;font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
        .panel-heading span{position:absolute;right:10px;top:12px;}
        table{
            border-bottom: 1px solid #ddd !important;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="">流浪猫狗管理系统</a>
        </div>
        <!-- 导航栏右侧图标部分 -->
        <!-- 导航栏右侧图标部分 -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- 消息通知 end -->
            <!-- 用户信息和系统设置 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="/admin/developing">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user ">
                    <li>
                        <input type="hidden" id = "currentAdminId" value="${admin.id}">
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-user fa-fw"></i>
                        管理员：${admin.adminName}</a>
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
                    <li class="divider"></li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/AdminLogin">
                            <i class="fa fa-sign-out fa-fw"></i>退出登录
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 用户信息和系统设置结束 -->
        </ul> <!-- 左侧显示列表部分 start-->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <!-- 教学管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading3" data-toggle="collapse" data-target="#collapseListGroup3" role="tab">
                    <h4 class="panel-title">
                        后台管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading3">
                    <ul class="list-group">
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/UserList">
                                <i class="fa fa-flash fa-fw"></i> 用户信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdminsList">
                                <i class="fa fa-flash fa-fw"></i> 管理员信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/PetList">
                                <i class="fa fa-sitemap fa-fw"></i> 宠物管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdoptList">
                                <i class="fa fa-sitemap fa-fw"></i> 领养管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/CommentList">
                                <i class="fa fa-sitemap fa-fw"></i> 评论管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/BlogListService">
                                <i class="fa fa-sitemap fa-fw"></i> 团队活动管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/ApplyList">
                                <i class="fa fa-sitemap fa-fw"></i> 志愿者的申请
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/agreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 同意领养列表
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/disagreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 不同意领养列表
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- 左侧显示列表部分 end-->
    </nav>
    <!-- 班级列表查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">用户活动管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <!-- 搜索部分 -->
            <div class="panel-body">
                <form class="form-inline" method="get" action="">
                    <div class="form-group">
                        <label for="findByTime">活动事件</label>
                        <input type="date" class="form-control" id="findByTime" value="" name="actionTime">
                    </div>
                    <button type="button" class="btn btn-primary" id="blog_find_modal_btn">查询</button>
                    <input type="button" value="新增" class="btn btn-success" id="blog_add_modal_btn" data-toggle="modal" data-target="#blogAddModal"/>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">活动列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped" id="blog_table">
                        <thead>
                        <tr>
                            <%--复选框，因为没有做相关功能，就弃用了--%>
                            <%--<th>
                                <input type="checkbox" id="check_all"/>
                            </th>--%>
                            <th>编号</th>
                            <th>活动时间</th>
                            <th>活动地点</th>
                            <th>活动人物</th>
                            <th>活动描述</th>
                            <th>标题</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${blogList}" var="blog">
                            <tr>
                                <td>${blog.id}</td>
                                <td>${blog.actionTime}</td>
                                <td>${blog.address}</td>
                                <td>${blog.peoples}</td>
                                <td>${blog.event}</td>
                                <td>${blog.title}</td>
                                <td>
                                    <a href="javascript:void(0);" data-toggle="modal" data-target="#blogEditModal" onclick="editBlog(${blog.id}, '${blog.actionTime}', '${blog.title}', '${blog.address}', '${blog.peoples}', '${blog.event}')">
                                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改
                                    </a>
                                    <button class="btn btn-danger delete-btn" data-id="${blog.id}">删除</button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class="row">
                        <!--分页文字信息  -->
                        <div class="col-md-8" id="page_info_area"></div>
                        <!-- 分页条信息 -->
                        <div class="col-md-4" id="page_nav_area">

                        </div>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- 用户查询  end-->
</div>

<!-- 修改活动信息的模态框 -->
<div class="modal fade" id="blogEditModal" tabindex="-1" role="dialog" aria-labelledby="blogEditModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="blogEditForm" action="${pageContext.request.contextPath}/admin/BlogEdit" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="blogEditModalLabel">修改活动信息</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit_blogId">
                    <div class="form-group">
                        <label for="edit_actionTime" class="control-label">活动时间:</label>
                        <input type="date" class="form-control" id="edit_actionTime" name="actionTime" required>
                    </div>
                    <div class="form-group">
                        <label for="edit_title" class="control-label">标题:</label>
                        <input type="text" class="form-control" id="edit_title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="edit_address" class="control-label">活动地点:</label>
                        <input type="text" class="form-control" id="edit_address" name="address">
                    </div>
                    <div class="form-group">
                        <label for="edit_peoples" class="control-label">活动人物:</label>
                        <input type="text" class="form-control" id="edit_peoples" name="peoples">
                    </div>
                    <div class="form-group">
                        <label for="edit_event" class="control-label">活动描述:</label>
                        <textarea class="form-control" id="edit_event" name="event"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 新增活动信息的模态框 -->
<div class="modal fade" id="blogAddModal" tabindex="-1" role="dialog" aria-labelledby="blogAddModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="blogAddForm" action="${pageContext.request.contextPath}/admin/BlogAdd" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="blogAddModalLabel">新增活动信息</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="add_blogId">
                    <div class="form-group">
                        <label for="add_actionTime" class="control-label">活动时间:</label>
                        <input type="date" class="form-control" id="add_actionTime" name="actionTime" required>
                    </div>
                    <div class="form-group">
                        <label for="add_title" class="control-label">标题:</label>
                        <input type="text" class="form-control" id="add_title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="add_address" class="control-label">活动地点:</label>
                        <input type="text" class="form-control" id="add_address" name="address">
                    </div>
                    <div class="form-group">
                        <label for="add_peoples" class="control-label">活动人物:</label>
                        <input type="text" class="form-control" id="add_peoples" name="peoples">
                    </div>
                    <div class="form-group">
                        <label for="add_event" class="control-label">活动描述:</label>
                        <textarea class="form-control" id="add_event" name="event"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 查询结果模态框 -->
<div class="modal fade" id="blogListModal" tabindex="-1" role="dialog" aria-labelledby="blogListModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="blogListModalLabel">查询结果</h4>
            </div>
            <div class="modal-body">
                <!-- 查询结果将在这里显示 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入js文件 -->
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/metisMenu.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/sb-admin-2.js"></script>
<!-- 编写js代码 -->

<script>
    // 编辑按钮点击事件
    function editBlog(id, actionTime, title, address, peoples, event) {
        document.getElementById('edit_blogId').value = id;
        document.getElementById('edit_actionTime').value = actionTime;
        document.getElementById('edit_title').value = title;
        document.getElementById('edit_address').value = address;
        document.getElementById('edit_peoples').value = peoples;
        document.getElementById('edit_event').value = event;
    }
    // 增加按钮点击事件
    $(document).ready(function() {
        // 处理新增按钮点击事件
        $('#blog_add_modal_btn').click(function() {
            // 清空表单内容
            $('#add_blogId').val('');
            $('#add_actionTime').val('');
            $('#add_title').val('');
            $('#add_address').val('');
            $('#add_peoples').val('');
            $('#add_event').val('');
        });

        // 处理表单提交事件
        $('#blogAddForm').submit(function(event) {
            // 阻止表单默认提交行为
            event.preventDefault();

            // 获取表单数据
            var formData = $(this).serialize();

            // 发送 AJAX 请求
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                success: function(response) {
                    // 处理成功响应，例如刷新表格或显示成功消息
                    alert('新增成功');
                    $('#blogAddModal').modal('hide');
                    location.reload();
                },
                error: function(xhr, status, error) {
                    // 处理错误响应，例如显示错误消息
                    alert('新增失败');
                }
            });
        });
    });

    $(document).ready(function() {
        // 查询按钮点击事件
        $('#blog_find_modal_btn').click(function() {
            var actionTime = $('#findByTime').val();
            if (actionTime) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/admin/BlogFindByTime', // Servlet的URL
                    type: 'GET',
                    data: {actionTime: actionTime},
                    success: function(response) {
                        if (response.success) {
                            var blogList = response.blogList;
                            var html = "<table class='table table-bordered table-striped'>";
                            html += "<thead><tr><th>编号</th><th>活动时间</th><th>活动地点</th><th>活动人物</th><th>活动描述</th><th>标题</th></tr></thead>";
                            html += "<tbody>";
                            if (blogList.length === 0) {
                                html += "<tr><td colspan='6'>没有找到符合条件的活动。</td></tr>";
                            } else
                            {
                                blogList.forEach(function(blog) {
                                    html += "<tr>";
                                    html += "<td>" + blog.id + "</td>";
                                    html += "<td>" + blog.actionTime + "</td>";
                                    html += "<td>" + blog.address + "</td>";
                                    html += "<td>" + blog.peoples + "</td>";
                                    html += "<td>" + blog.event + "</td>";
                                    html += "<td>" + blog.title + "</td>";
                                    html += "</tr>";
                                });
                            }
                            html += "</tbody>";
                            html += "</table>";
                            $('#blogListModal .modal-body').html(html);
                            $('#blogListModal').modal('show');
                        } else {
                            $('#blogListModal .modal-body').html("<p>查询失败：" + response.error + "</p>");
                            $('#blogListModal').modal('show');
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('查询失败');
                    }
                });
            } else {
                alert('请选择时间');
            }
        });
    });

    $(document).ready(function() {
        // 绑定点击事件到所有的删除按钮
        $('body').on('click', '.delete-btn', function() {
            var id = $(this).data('id'); // 获取按钮上的数据id属性
            if (confirm('确定要删除这条记录吗？')) { // 弹出确认对话框
                $.ajax({
                    url: '${pageContext.request.contextPath}/admin/BlogDelete', // BlogDeleteServlet的URL
                    type: 'POST',
                    data: {id: id}, // 发送id参数
                    success: function() {
                        alert('删除成功');
                        location.href='${pageContext.request.contextPath}/admin/BlogListService';
                    },
                    error: function() {
                        alert('删除失败');
                    }
                });
            }
        });
    });
</script>
</body>
</html>
